<template>
  <div class="page">
    <div class="page-content">
      <div class="page-content-screen">
        <div>
          <el-tabs v-model="queryData.maturityType" class="demo-tabs" @tabChange="tabChange">
            <el-tab-pane label="存续中" name="1"></el-tab-pane>
            <el-tab-pane label="已到期" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="total">共计 <span style="color: #FF5959;">{{ totalNum}}</span> 条</div>
      </div>
      <div class="page-content-table">
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalNum"
          :pageSize="PAGE_SIZE"
          :pageNum="queryData.pageNum"
          :defaultSort="{ field: 'noticeDate', order: 'desc' }"
          :maxHeight="500"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {getGreenBondF9} from '../../apis';
import {useTable} from './useTable';
import {useScreen} from './useScreen';
import {calculateTableMaxHeight} from "@/utils";
import {usePage} from '@/use/usePage';

interface Props {
  companyId: any[]
}

const {
  companyId
} = defineProps<Props>();
const {PAGE_SIZE, queryData} = useScreen();
let maxHeight = $ref(0)
queryData.companyId = companyId
const {data, loading, run} = useRequest(getGreenBondF9, {
  defaultParams: [{...queryData}],
  onSuccess: (data) => {
    tableData.value = data.values;
    totalNum.value = data.total;
    nextTick(() => {
      //计算最大高度
      maxHeight = calculateTableMaxHeight()
    })
  }
});
const tabChange = (name) => {
  queryData.maturityType = name
}

const {columns} = useTable();
const {
  tableData,
  totalNum,
  searchTxt,
  handlerInput,
  handleCurrentChange,
  sortChange
} = usePage(queryData, run);

</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
